<template>
  <div class="ident-check">
    <van-nav-bar
      class="page-nav-bar"
      :left-text="titleText()"
      left-arrow
      :border="false"
      @click-left="$router.back(-2)"
    />
    <div v-if="this.type !== 'company'" class="userLogin">
      <img src="@/assets/user.png" alt="" />
      <span class="text">用户</span>
    </div>
    <div v-if="type === 'persone' && showValidate === false" class="persone">
      <span class="indent"
        >湖南家政平台在此特别提醒您（家服员、家政员）在阅读前，请认真阅读本《授权协议》（以下简称“协议”）请您谨慎阅读并选择接受或者不接受本协议。本协议由湖南家政平台根据国家政策实时更新，更新后协议条款一旦公布即代替原来的协议条款，恕不另行通知。</span
      >
      <h6>一、本人自愿申请建立家庭服务员信用记录</h6>
      <span class="indent"
        >本人自愿加入湖南家政平台，湖南家政平台可以使用本人
        身份信息、肖像信息、家庭服务信息和职业信息；身份信息
        包含但不限于身份证号码，姓名，性别，民族，家庭住址，
        健康状况，教育水平等；职业信息包含但不限于从业经历，
        培训情况、培训考核情况、消费者评价和投诉情况等；</span
      >
      <h6>二、本人承诺：</h6>
      <span class="indent"
        >本人自愿加入湖南家政平台，湖南家政平台可以使用本人
        身份信息、肖像信息、家庭服务信息和职业信息；身份信息
        包含但不限于身份证号码，姓名，性别，民族，家庭住址，
        健康状况，教育水平等；职业信息包含但不限于从业经历，
        培训情况、培训考核情况、消费者评价和投诉情况等；</span
      >
      <span class="indent"
        >请点击：我也已阅读并同意以上协议“按钮，代表您同意
        本协议的全部内容，并授权您在诚信平台的所有资料都可以
        向消费者显示。</span
      >
      <van-button class="btnOK" color="#3F51B5" block @click="btnOK">
        我已阅读并同意以上协议
      </van-button>
    </div>
    <validate-form
      v-show="showValidate"
      :showValidate="showValidate"
      :type="type"
    />
  </div>
</template>

<script>
import validateForm from "./components/validateForm";

export default {
  components: {
    validateForm
  },
  data() {
    return {
      formData: {},
      userId: this.$route.params.id,
      type: this.$route.query.type, // 类型
      showValidate: false
    };
  },
  created() {
    this.titleText();
  },
  methods: {
    titleText() {
      if (this.type === "login") {
        this.showValidate = true;
        return "登录";
      } else if (this.type === "persone") {
        return "授权与协议";
      } else if (this.type === "manager") {
        this.showValidate = true;
        return "管理员身份认证";
      } else {
        return "关于我们";
      }
    },
    btnOK() {
      this.showValidate = true;
    }
  }
};
</script>

<style scoped lang="scss">
.ident-check {
  height: 100vh;
  background-color: #f8f8f8;
  ::v-deep.page-nav-bar {
    font-size: 32px;
    flex-direction: column;
    background-color: #3f51b5;
    .van-nav-bar__left {
      font-size: 32px;
    }
    .van-nav-bar__text {
      color: #fff;
    }
    .van-icon-arrow-left::before {
      color: #fff;
    }
  }
  .userLogin {
    height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #3f51b5;
    img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background-color: #fff;
    }
    .text {
      font-size: 28px;
      margin-top: 34px;
      color: #fff;
    }
  }
}
::v-deep.persone {
  height: 70vh;
  overflow-y: auto;
  position: absolute;
  top: 320px;
  font-size: 24px;
  color: #444;
  background-color: #fff;
  width: 90%;
  margin: 0 5vw;
  border-radius: 10px;
  .indent {
    height: 44px;
    line-height: 44px;
    display: inline-block;
    color: #333;
    text-indent: 1em !important;
  }
  .btnOK {
    z-index: 2;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
